<template>
  <div class="bg-white my-[10px]">
    <BaseHead style="border-bottom: 0">经费卡</BaseHead>
    <el-table :data="detailData.feeCardList" class="w-full" border stripe>
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="经费卡号">
        <template #default="{ row }">
          <el-link type="primary" @click="viewFeeCard(row)">{{ row.feeCardNum }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="feeChargerName" label="经费负责人" />
      <el-table-column label="总预算（万元）">
        <template #default="{ row }">
          <MoneyLabel :value="row.budgettotal" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="总到账（万元）">
        <template #default="{ row }">
          <MoneyLabel :value="row.incometotal" />
        </template>
      </el-table-column> -->
      <el-table-column label="结余（万元）">
        <template #default="{ row }">
          <MoneyLabel :value="row.paytotal" />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="bg-white my-[10px]">
    <BaseHead style="border-bottom: 0">经费入账</BaseHead>
    <el-table :data="detailData.inComeVoList" class="w-full" border stripe>
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column prop="incomeUnitName" label="来款单位" />
      <el-table-column prop="incomeDate" label="到账日期" />
      <el-table-column label="本次入账（万元）">
        <template #default="{ row }">
          <MoneyLabel :value="row.incomeFee" />
        </template>
      </el-table-column>
      <el-table-column prop="feeCardNum" label="经费账号" />
      <el-table-column prop="feeChargerName" label="经费卡负责人" />
      <el-table-column label="审核状态">
        <template #default="{ row }">
          <CommonLabel
            :dataList="checkStatusList"
            valueKey="dictValue"
            labelKey="dictLabel"
            :value="row.checkStatus"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="bg-white my-[10px]">
    <BaseHead style="border-bottom: 0">经费外拨</BaseHead>
    <el-table :data="detailData.outboundMainVoList" class="w-full" border stripe>
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column prop="projectName" label="项目名称">
        <template #default="{ row }">
          <el-link type="primary" @click="viewFeeWb(row)">{{ row.projectName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="chargerName" label="负责人" />
      <el-table-column label="申请外拨经费（万元）">
        <template #default="{ row }">
          <MoneyLabel :value="row.outboundFee" />
        </template>
      </el-table-column>
      <el-table-column prop="outbounddate" label="申请外拨日期" />
      <el-table-column prop="unitName" label="所属单位" />
      <el-table-column label="审核状态">
        <template #default="{ row }">
          <CommonLabel
            :dataList="checkStatusList"
            valueKey="dictValue"
            labelKey="dictLabel"
            :value="row.checkstatus"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="bg-white my-[10px]">
    <BaseHead style="border-bottom: 0">经费报销</BaseHead>
    <el-table :data="detailData.payoutVoList" class="w-full" border stripe>
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column prop="payoutSubjectName" label="支出科目" />
      <el-table-column prop="payoutFee" label="支出金额（元）" />
      <el-table-column prop="payoutDate" label="支出时间" />
      <el-table-column prop="budgetSubjectName" label="预算科目" />
      <el-table-column prop="note" label="摘要" />
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template #default="{ row }">
          <el-button type="primary" size="small" plain @click="viewFeeBx(row)"> 查看 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <ViewFeeBx ref="viewFeeBxRef" />
  <ViewFeeWb ref="viewFeeWbRef" />
  <ViewFeeCard ref="viewFeeCardRef" />
</template>

<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import MoneyLabel from "@/views/project/components/MoneyLabel.vue";
import ViewFeeBx from "@/views/money/jfzc/jfzcDialogDetails.vue"; //查看经费报销
import ViewFeeWb from "@/views/money/jfwb/JfwbDetails.vue"; //查看经费报销
import ViewFeeCard from "@/views/fee/rz/xmjfk/components/ViewModal.vue";
import { feeDetail } from "@/api/project/zx/lxxm";
const checkStatusList = inject("checkStatusList");
const operateId = inject("id");
const detailData = ref({});
const viewFeeBxRef = ref();
const viewFeeWbRef = ref();
const viewFeeCardRef = ref();
//获取信息详情
const getDetail = async () => {
  try {
    const res = await feeDetail(operateId.value);
    detailData.value = res.data;
  } catch (error) {
    console.log(error);
  }
};
//点击查看经费卡
const viewFeeCard = (row) => {
  viewFeeCardRef.value.view(row);
};
//点击查看经费报销
const viewFeeBx = (row) => {
  viewFeeBxRef.value.openDialog(row);
};
//点击查看经费外拨
const viewFeeWb = (row) => {
  viewFeeWbRef.value.opencompileDialog(row);
};
onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss"></style>
